<template>
  <headPage></headPage>
  <div class="main_box">
    <div class="search_input">
      <div class="search">
        <div class="search_le">
          <el-input
            v-model="keyword"
            placeholder="搜索你想要查找的内容"
            placeholder-style="color:#999;font-size:10px;"
            @keyup.enter="confirmSearch"
          />
        </div>
        <div class="search_ri" @click="confirmSearch">
          <span>搜索</span>
        </div>
      </div>
    </div>

    <div class="view_list" v-loading="loading">
      <div
        class="list_item"
        v-for="(item, index) in list"
        :key="index"
        @click="goDetails(item.aid)"
      >
        <div class="item_le">
          <div class="item_icon"></div>
          <div class="item_text">
            {{ item.biaoti }}
          </div>
        </div>
        <div class="item_ri">{{ item.create_time }}</div>
      </div>
      <div class="no_data" v-if="list.length == 0 && !loading">
        <img class="no_img" src="../../assets/default/12.png" alt="" />
      </div>
    </div>

    <div class="paging_content">
      <paging
        :total="total"
        :pageSize="pageSize"
        @pageChange="pageChange"
      ></paging>
    </div>
  </div>
  <footerPage></footerPage>
</template>
    
    <script name="searchResult" setup>
import { post65e840ab30e63 } from "@/utils/api.js";
import { ref, reactive, onMounted, inject } from "vue";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import paging from "@/components/paging.vue";
import courseItem from "@/components/courseItem.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const injectMessage = inject("$message");

let keyword = ref("");
let major_id = ref("");
keyword.value = route.query.keyword;
major_id.value = route.query.major_id;

onMounted(() => {
  getList();
});

function confirmSearch() {
  if (!keyword.value) {
    injectMessage.error("请输入搜索内容");
    return;
  }
  loading.value = true;
  getList();
}

// 知识库列表
let list = reactive([]);
let total = ref(0);
let loading = ref(true);
let pageNum = ref(1);
let pageSize = ref(10);
function getList() {
  post65e840ab30e63({
    biaoti: keyword.value,
    freeprofessionalmanagement_id: major_id.value == -1 ? "" : major_id.value,
    page: pageNum.value,
    list_rows: pageSize.value,
  }).then((res) => {
    console.log(res);
    loading.value = false;
    if (res.code == 1) {
      total.value = res.data.total;
      list = res.data.data;
    }
  });
}

// 分页
function pageChange(page) {
  pageNum.value = page;
  loading.value = true;
  getList();
}

function goDetails(aid) {
  router.push({
    path: "/knowledgeDetails",
    query: {
      aid: aid,
    },
  });
}
</script>
    
    <style lang="scss" scoped>
.search_input {
  background: #fff;
  padding: 20px 0 14px;
  margin: 110px 0 13px;
  .search {
    width: 524px;
    height: 30px;
    background: #f6f7f9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    .search_le {
      font-size: 10px;
      width: 459px;
    }
    .search_ri {
      width: 65px;
      height: 30px;
      position: relative;
      background: #1f52ae;
      border-radius: 0px 3px 3px 0px;
      font-size: 10px;
      color: #fff;
      cursor: pointer;
      text-align: center;
      line-height: 30px;
    }
  }
  .history {
    width: 524px;
    margin: 14px auto 10px;
    min-height: 160px;
    .history_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 9px;
      font-weight: 500;
      img {
        width: 8px;
        height: 8px;
        cursor: pointer;
      }
    }
    .history_list {
      overflow: hidden;
      margin-top: 12px;
      .search_item {
        float: left;
        font-size: 8px;
        padding: 4.5px 9px;
        display: flex;
        align-items: center;
        background: #f6f7f9;
        border-radius: 2px;
        margin: 0 8px 4px 0;
        cursor: pointer;
        img {
          width: 8px;
          height: 8px;
          cursor: pointer;
          margin-left: 6px;
        }
      }
    }
  }
}

.view_list {
  margin: 16px 0 16px;
  background: #fff;
  padding: 8px 14px;
  min-height: 300px;
  .list_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    cursor: pointer;
    .item_le {
      display: flex;
      align-items: center;
      .item_icon {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #1f52ae;
        margin-right: 7px;
      }
      .item_text {
        font-size: 9px;
      }
    }
    .item_ri {
      font-size: 9px;
      color: #999;
    }
  }
}
.paging_content {
  margin: 8px 0 20px;
}
</style>
    
    